<div class="performance">
<div class="performance-container">
<header>
<div class="time-choose">
<div class="time-spans">
<span class="time">
<span (click)=onClickHeader(0) [ngClass]="{on:active==0}">年度</span>
<span (click)=onClickHeader(1) [ngClass]="{on:active==1}">季度</span>
<span (click)=onClickHeader(2) [ngClass]="{on:active==2}">月度</span>
</span>
<span>
<span>选择时间：</span>
<span *ngIf="true">
<select class="year" [ngModel]="currentYear" (ngModelChange)="onChangeYear($event)">
<option [value]="year" *ngFor="let year of years"> {{year}} </option>
</select>
年
</span>
<span *ngIf="active==1">
<select class="quarter" [ngModel]="currentQuarter" (ngModelChange)="onChangeQuarter($event)">
<option [value]="quarter" *ngFor="let quarter of quarters">{{ quarter }}</option>
</select>
季度
</span>
<span *ngIf="active==2">
<select class="month" [ngModel]="currentMonth" (ngModelChange)=" onChangeMonth($event)">
<option [value]="month" *ngFor="let month of months"> {{month}}</option>
</select>
月
</span>
<span>
<select class="rank" [ngModel]="currentRank" (ngModelChange)=" onChangeRank($event)">
<option [value]="rank" *ngFor="let rank of ranks"> {{rank}}</option>
</select>
<input type="number" min="3" max="100" [(ngModel)]="rankValue"> 名
</span>
</span>
<span>
<button class="button-trend" (click)="onSearch(active)">确定</button>
</span>
</div>
</div>

<div class="lose-item">
<div class="time-btn">
<span [ngClass]="{on:powerLossType==0}" (click)="onClickLoss(0)">实发电量</span>
<span [ngClass]="{on:powerLossType==1}" (click)="onClickLoss(1)">停机损失</span>
<span [ngClass]="{on:powerLossType==2}" (click)="onClickLoss(2)">性能损失</span>
<span [ngClass]="{on:powerLossType==3}" (click)="onClickLoss(3)">限电损失</span>
<span [ngClass]="{on:powerLossType==4}" (click)="onClickLoss(4)">坏点损失</span>
</div>
</div>
</header>

<div class="main">
<!--年  -->
<div [ngClass]="{'main-content':true, active:active==0}">
<section class="farm">
<!-- 公司风场年度 -->
<div class="title">
<p>{{ currentYear }}年各风场{{ powerLossStr }}排名</p>
</div>
<div class="farm-column">
<app-performance-columun-chart (onFarmColumnClick)="onFarmColumnClick($event)" [xAxisData]="yearFarmXAxis" [series]="yearFarmSeries"></app-performance-columun-chart>
</div>
</section>

<section class="turbine">
<!-- 公司风机年度 -->
<div class="title">
<p>{{ currentYear }}年各风机{{ powerLossStr }}排名</p>
</div>
<div class="turbine-column">
<app-performance-columun-chart [xAxisData]="yearTurbXAxis" [series]="yearTurbSeries"></app-performance-columun-chart>
</div>
</section>
</div>

<!--季度  -->
<div class="main-content" [ngClass]="{'main-content':true, active:active==1}">
<section class="farm">
<!-- 公司风场年度 -->
<div class="title">
<p>{{ currentYear }}年各风场{{ currentQuarter }}季度{{ powerLossStr }}排名</p>
</div>
<div class="farm-column">
<app-performance-columun-chart (onFarmColumnClick)="onFarmColumnClick($event)" [xAxisData]="qurterFarmXAxis" [series]="qurterFarmSeries"></app-performance-columun-chart>
</div>
</section>

<section class="turbine">
<div class="title">
<p>{{ currentYear }}年各风机{{ currentQuarter }}季度{{ powerLossStr }}排名</p>
</div>
<div class="turbine-column">
<app-performance-columun-chart [xAxisData]="qurterTurbXAxis" [series]="qurterTurbSeries"></app-performance-columun-chart>
</div>
</section>
</div>

<!--月  -->
<div class="main-content" [ngClass]="{'main-content':true, active:active==2}">
<section class="farm">
<!-- 公司风场年度 -->
<div class="title">
<p>{{ currentYear }}年各风场{{ currentMonth }}月份{{ powerLossStr }}排名</p>
</div>
<div class="farm-column">
<app-performance-columun-chart (onFarmColumnClick)="onFarmColumnClick($event)" [xAxisData]="monthFarmXAxis" [series]="monthFarmSeries"></app-performance-columun-chart>
</div>
</section>

<section class="turbine">
<div class="title">
<p>{{ currentYear }}年各风机{{ currentMonth }}月份{{ powerLossStr }}排名</p>
</div>
<div class="turbine-column">
<app-performance-columun-chart [xAxisData]="monthTurbXAxis" [series]="monthTurbSeries"></app-performance-columun-chart>
</div>
</section>
</div>

</div>
</div>
</div>